<template>
    <view class="content">
        <view class="picture">
            <view class="picture_item">
                <image :src="user.img" mode="aspectFit"></image>
            </view>
            <button class="picturebutton" open-type="chooseAvatar" @chooseavatar="uploadAvatar">
                点击更换头像
            </button>
        </view>
        <view class="info">
            <view class="info_items nickname">
                <view class="nickname_title title">
                    昵称
                </view>
                <view class="nickname_item item">
                    <input v-model="user.nickName" placeholder="请输入昵称" type="nickname"/>
                </view>
            </view>
            <view class="info_items telephone ">
                <view class="telephone_title title">
                    手机号
                </view>
                <view class="telephone_item item">
                    <input v-model="user.phone" placeholder="请输入手机号"/>
                </view>
            </view>
            <view class="info_items role">
                <view class="role_title title">
                    角色
                </view>
                <view class="role_item item">
                    {{ user.isAdmin == 1 ? '管理员' : '用户' }}
                </view>
            </view>
        </view>
        <button class="infobutton" type="primary" @click="changePictureBtn">保存设置</button>
    </view>
</template>

<script setup>
import {
    ref, reactive
} from 'vue';
import {
    toast
} from "@/utils/common.js"
import {
    usersetInfoService
} from '../../api/user';
import {
    uploadImagePromise
} from "@/utils/request.js"
import {
    useUserStore
} from '@/stores/index';

const userStore = useUserStore()
// 创建响应式对象
const user = reactive(userStore.user);
console.log(1111, user)

const uploadAvatar = (e)=> {
    console.log(111,e)
    new Promise((resolve, reject) => {
        // 获取图片信息（临时路径）
        uni.getImageInfo({
            src: e.detail.avatarUrl,
            success: (res) => {
                console.log("图片信息", res)
                resolve(res);
            },
            fail: (err) => {
                console.error("获取图片信息失败了", err)
                reject(err);
            },
        });
    })
        .then((res) => {
            return Promise.resolve({
                tempFilePath: e.detail.avatarUrl,
            });
        })
        .then((res) => {
            // 上传头像到服务器
            // return postApi(res).then((res) => {
            //   infoForm.avatar = res.url;
            // });
            console.log(999, e)
            user.img = e.detail.avatarUrl
            // changePictureBtn(e.detail.avatarUrl)
            // const res: any = await postApi('/api/index/getAllSaishi', res);
            // if (res.code === 1) {
            //
            // } else {
            //
            // }
        })
        .catch((err) => {
            // 获取失败时使用store内默认头像
            // infoForm.avatar = userStore.userInfo.avatar
        });
}

const changePictureBtn = async () => {
    uploadImagePromise(user.img).then(url => {
        console.log(url, "url")
        usersetInfoService({
            id: user.id,
            img: url || user.img,
            nickName: user.nickName,
            phone: user.phone,
        }).then(res => {
            if (res.code == 200) {
                userStore.setUser({
                    ...user,
                    img: url
                })
                toast(res.msg);
            }else {
                toast.error(res.msg);
            }
            console.log(res)
        }).catch(() => {
            toast('稍后重试')
        })
    })
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 50rpx;
    width: 686rpx;
    height: 568rpx;
    padding: 0 32rpx;
    background-color: rgba(255, 255, 255, 1);
    gap: 32rpx;

    .picture {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 568rpx;
        height: 179rpx;
        margin-top: 44rpx;
        gap: 20rpx;

        .picture_item {
            width: 120rpx;
            height: 120rpx;
            margin-top: -10rpx;
            border-radius: 106.5rpx;
            border: 4rpx solid rgba(255, 255, 255, 1);
            overflow: hidden;

            image {
                width: 120rpx;
                height: 120rpx;
            }
        }

        .picturebutton {
            height: 39rpx;
            font-size: 28rpx;
            line-height: 39rpx;
            border-radius: 100rpx;
            font-weight: 400;
            color: #fff;
            background-color: rgba(79, 129, 240, 1);
        }
    }

    .info {
        width: 686rpx;
        height: 277rpx;
        gap: 32rpx;
        padding: 40rpx 0;

        .info_items {
            display: flex;
            justify-content: space-between;
            width: 638rpx;
            height: 39rpx;
            font-size: 28rpx;
            border-bottom: 1rpx solid rgba(225, 225, 225, 1);
            padding: 0 24rpx 32rpx 24rpx;
            margin-bottom: 32rpx;

            .title {
                color: rgba(51, 51, 51, 1);
            }

            .item {
                color: rgba(187, 187, 187, 1);
            }

            .nickname_title {
                width: 56rpx;
                height: 39rpx;
            }

            .nickname_item {
                width: 300rpx;
                height: 39rpx;
                text-align: right;
            }

            .telephone_title {
                width: 84rpx;
                height: 39rpx;
            }

            .telephone_item {
                width: 300rpx;
                height: 39rpx;
                text-align: right;
            }

            .role_title {
                width: 56rpx;
                height: 39rpx;
            }

            .role_item {
                width: 84rpx;
                height: 39rpx;
            }
        }
    }
    .infobutton {
        width: 582rpx;
        height: 80rpx;
        padding: 45rpx 20rpx;
        border-radius: 100rpx;
        font-size: 28rpx;
        line-height: 1rpx;
        font-weight: 400;
        background-color: rgba(79, 129, 240, 1);
    }
}
</style>